<template>
   <div id='classes'>
       <el-card :body-style="{ padding: '0px 10px 140px' }">
           <div slot="header">
               <span>班级管理</span>
           </div>
           <el-table :data="tableData">
               <el-table-column prop="classname" label="名称" width="320">
               </el-table-column>
               <el-table-column prop="status" label="状态" width="320">
                   <span slot-scope="{row}"  >
                       <el-tag type='default' size='mini'>{{row.status==1?'显示':'不显示'}}</el-tag>
                   </span>
               </el-table-column>
               <el-table-column  label="操作" width="320">
                   <div slot-scope="{row}"  >
                       <el-button-group>
                           <el-button type='default' round size='mini' @click='edit(row)'>编辑
                           </el-button>
                           <el-button type='default' round size='mini' @click='del(row.id)'>删除
                           </el-button>
                       </el-button-group>
                   </div>
               </el-table-column>
           </el-table>
       </el-card>
  <!-- 弹出对话框 开始-->
  <el-dialog width="400px" title="编辑班级" :visible.sync="dialogVisible" @close='dialogClose'>
    <el-form label-position="left" :model="formData" ref="formData" :rules='rules' label-width="60px">
      <el-form-item label="班级" prop="classname">
        <el-input v-model="formData.classname"></el-input>
      </el-form-item>
      状态：显示<el-switch v-model="formData.status"  :active-value="1" :inactive-value="0"  ></el-switch>不显示
    </el-form>

    <div slot="footer">
      <el-button :icon="buttonOkIcon" :disabled="buttonDisabled" type="primary" @click="menusEdit" >确 定</el-button>
    </div>
  </el-dialog>
  <!-- 弹出对话框 结束-->
   </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      rules: {
        classname: [
          {
            validator: (rules, value, callback) => {
              switch (true) {
                case !/^\w{2,4}$/.test(value):
                  callback(new Error("2-4"));
                  break;
                default:
                  callback();
              }
            }
          }
        ]
      },
      dialogVisible: false,
      formData: {
        classname: "",
        status: 1
      },
      buttonOkIcon: "",
      buttonDisabled: false,
      oldclassname: ""
    };
  },
  created() {
    this.getClassesList();
  },
  methods: {
    //删除代码
    del(id) {
      this.$confirm("是否继续？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$http.get(`/classes/delete?id=${id}`).then(result => {
            this.getClassesList();
          });
        })
        .catch(() => {});
    },
    //编辑代码
    edit(row) {
      this.dialogVisible = true;
      console.log(this.formData);
      // 数据回填
      this.formData.classname = row.classname;
      this.formData.status = row.status;
       this.$set(this.formData, "id", row.id);
    },
    //载入列表代码
    getClassesList() {
      this.$http.get("/classes/list").then(result => {
        this.tableData = result.data.data;
      });
    },
    // 编辑添加确认代码
    menusEdit() {
      this.dialogTitle = "编辑"; //修改dialog标题
      // 设置id
      this.$http.post('/classes/edit',this.$qs.stringify(this.formData)).then((result)=>{
        this.dialogVisible=false
        this.getClassesList();
      })
    },
    // 关闭窗口函数
    dialogClose() {
      this.$refs.formData.resetFields();
      this.formData.pid = 0;
    }
  }
};
</script>
<style>
</style>


